<template>
	<view class="container">
		<view
			class="item"
			v-for="(file, index) in files"
			:key="index"
			:style="{
				width: files.length === 1 || files.length === 2 || files.length === 4 ? parseFloat((width - 3 * space) / 2) + 'rpx' : parseFloat((width - 4 * space) / 3) + 'rpx',
				height: parseFloat(width / (files.length === 2 || files.length === 4 || files.length === 1 ? 2 : 3)) + 'rpx',
				margin: space + 'rpx'
			}"
		>
			<!-- 图片的展示 -->
			<image @click="perViewFile(index, files)" lazy-load :src="file.file_type === 0 ? file.file_path : file.file_preview" mode="aspectFill"></image>
			<text @click="perViewFile(index, files)" v-if="file.file_type === 1" class="iconfont icon-b- video-bofang"></text>
		</view>
	</view>
</template>

<script>
import { throttle } from '../../utils/DebouchAndThrottl.js';
export default {
	name: 'mediaScratchableLatex',
	props: ['files', 'width', 'space'],
	data() {
		return {
			high_wide_media_strategy: {}
		};
	},
	mounted() {},
	methods: {
		perViewFile: throttle(function(index, files) {
			uni.navigateTo({
				url: '../utils/previewImageAndVideo?index=' + index,
				success: res => {
					uni.setStorageSync('previewFileArry', files);
					uni.setStorageSync('previewFileindex', index);
				}
			});
		}, 1000),
		secondToDate(second) {
			let h = Math.floor(second / 3600) * 60;
			let m = Math.floor((second / 60) % 60) + h;
			let s = Math.floor(second % 60);
			return m + h + ':' + s;
		},
		calculate_wide_high(w) {
			let margin_wide = (100 - w) * 5;
			let calc_wide = (w - margin_wide) / 3;
			return calc_wide + '%';
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	.item {
		position: relative;
		flex-shrink: 0;
		color: #007aff;
		align-items: center;
		justify-content: center;
		background: #c0c0c0;
		rotation: 0.3;
		border-radius: 10rpx;
		box-shadow: 1rpx 1rpx 5rpx #d9d9d9;
	}
}

.video-bofang {
	color: white;
	position: absolute;
	font-size: 70rpx;
	top: calc(50% - 60rpx);
	left: calc(50% - 40rpx);
}

image,
video {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.video_preview_info {
	display: inline-block;
	position: absolute;
	width: 150rpx;
	top: 125rpx;
	right: 35rpx;
	font-size: 30rpx;
	text-align: center;
	color: white;
}
</style>
